<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { anomalyService } from '@/assets/api/AnomalyMonitoring'
import { DataLine, TrendCharts, Warning, Clock, ArrowUp, ArrowDown, Download } from '@element-plus/icons-vue'

// 当前激活的页签
const activeTab = ref('monitoring')

// 监测页签
const monitoringTab = ref('country')

// 表单数据
const form = reactive({
  // 数据范围
  customsArea: '',           // 关区
  importExportType: '',      // 进出口类型
  startDate: '',             // 开始日期
  endDate: '',               // 结束日期
  
  // 统计设置
  statisticalType: 'month',  // 统计类型：年/月/日
  dataSource: 'external',    // 数据来源：外部数据/日库/月库
  
  // 二次筛选
  amountPercentage: 5.0,     // 金额占比阈值（百分比）
  enableSecondaryFilter: false, // 是否启用二次筛选
  
  // 币种设置
  currency: 'RMB',           // 币种：RMB/USD
  
  // 预警设置
  enableAlert: true,         // 是否启用预警
  alertThreshold: 1.1,       // 预警阈值倍数
  historyMonths: 24,         // 历史数据月数
  
  // 预测设置
  forecastPeriods: 6         // 预测周期
})

// 下拉选项
const customsOptions = ref([
  { label: '洋山', value: '洋山' },
  { label: '浦东', value: '浦东' },
  { label: '虹桥', value: '虹桥' }
])

const importExportOptions = [
  { label: '全部', value: '' },
  { label: '进口', value: 'IMPORT' },
  { label: '出口', value: 'EXPORT' }
]

const statisticalTypeOptions = [
  { label: '年', value: 'year' },
  { label: '月', value: 'month' },
  { label: '日', value: 'day' }
]

const dataSourceOptions = [
  { label: '外部数据', value: 'external' },
  { label: '日库', value: 'daily' },
  { label: '月库', value: 'monthly' }
]

const currencyOptions = [
  { label: '人民币', value: 'RMB' },
  { label: '美元', value: 'USD' }
]

// 数据状态
const loading = ref(false)
const monitoringData = ref([])
const predictionData = ref([])
const drillDownData = ref([])

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 监测类型配置
const monitoringTypes = {
  country: { label: '国别监测', key: 'country' },
  port: { label: '口岸监测', key: 'port' },
  businessType: { label: '业态监测', key: 'businessType' },
  region: { label: '地区监测', key: 'region' }
}

// 表格列配置
const getTableColumns = (type) => {
  const baseColumns = [
    { prop: 'serialNo', label: '序号', width: 80 },
    { prop: 'importExportAmount', label: '进出口额(人民币)', minWidth: 180 },
    { prop: 'importExportYoyChange', label: '同比变化', minWidth: 120 },
    { prop: 'importExportMomChange', label: '环比变化', minWidth: 120 },
    { prop: 'importAmount', label: '进口额(人民币)', minWidth: 160 },
    { prop: 'exportAmount', label: '出口额(人民币)', minWidth: 160 },
    { prop: 'isAlert', label: '预警', width: 100, slot: true }
  ]

  const typeColumns = {
    country: [{ prop: 'country', label: '国家/地区', minWidth: 180 }],
    port: [{ prop: 'port', label: '口岸', minWidth: 180 }],
    businessType: [{ prop: 'tradeMethod', label: '贸易方式', minWidth: 180 }],
    region: [{ prop: 'region', label: '地区', minWidth: 180 }],
    commodity: [{ prop: 'commodityName', label: '商品名称', minWidth: 180 }]
  }

  return [...typeColumns[type], ...baseColumns]
}

// 获取监测数据
const fetchMonitoringData = async () => {
  loading.value = true
  try {
    const params = {}
    if (form.customsArea) params.customsArea = form.customsArea
    if (form.importExportType) params.importExportType = form.importExportType
    if (form.startDate) params.startDate = form.startDate
    if (form.endDate) params.endDate = form.endDate

    const result = await anomalyService.getMonitoringData(monitoringTab.value, params)
    
    if (result.success) {
      // 确保数据是数组格式
      monitoringData.value = Array.isArray(result.data) ? result.data : []
      pagination.total = monitoringData.value.length
      if (!monitoringData.value.length) {
        ElMessage.info('没有匹配的数据')
      }
    } else {
      ElMessage.error(result.message)
      monitoringData.value = []
    }
  } catch (error) {
    ElMessage.error(error.message || '获取数据失败')
    monitoringData.value = []
  } finally {
    loading.value = false
  }
}

// 获取预测数据
const fetchPredictionData = async () => {
  loading.value = true
  try {
    const params = {
      forecastPeriods: form.forecastPeriods
    }
    if (form.customsArea) params.customsArea = form.customsArea
    if (form.importExportType) params.importExportType = form.importExportType

    console.log('发送预测请求参数:', params) // 调试日志
    
    const result = await anomalyService.getPredictionData('total', params)
    
    console.log('预测API返回结果:', result) // 调试日志
    
    if (result.success) {
      // 从后端返回的数据中提取表格数据
      if (result.data && result.data.tableData && Array.isArray(result.data.tableData)) {
        predictionData.value = result.data.tableData
        console.log('设置预测数据:', predictionData.value) // 调试日志
      } else {
        // 如果没有tableData，尝试从其他字段获取数据
        console.log('未找到tableData，尝试其他字段:', result.data) // 调试日志
        if (result.data && Array.isArray(result.data)) {
          predictionData.value = result.data
        } else if (result.data && typeof result.data === 'object') {
          // 如果是对象，尝试转换为数组
          const dataArray = Object.values(result.data).filter(val => Array.isArray(val))
          if (dataArray.length > 0) {
            predictionData.value = dataArray[0]
          } else {
            predictionData.value = []
          }
        } else {
          predictionData.value = []
        }
      }
      
      if (!predictionData.value.length) {
        ElMessage.info('没有预测数据')
        console.log('预测数据为空') // 调试日志
      } else {
        console.log('预测数据加载成功，共', predictionData.value.length, '条') // 调试日志
      }
    } else {
      ElMessage.error(result.message)
      predictionData.value = []
      console.log('预测API调用失败:', result.message) // 调试日志
    }
  } catch (error) {
    ElMessage.error(error.message || '获取预测数据失败')
    predictionData.value = []
    console.error('预测数据获取异常:', error) // 调试日志
  } finally {
    loading.value = false
  }
}

// 获取钻取分析数据
const fetchDrillDownData = async (dimension, value) => {
  loading.value = true
  try {
    const params = {
      dimension,
      value,
      filters: {
        customsArea: form.customsArea,
        importExportType: form.importExportType
      }
    }

    const result = await anomalyService.getDrillDownData(params)
    
    if (result.success) {
      // 确保数据是数组格式
      drillDownData.value = Array.isArray(result.data) ? result.data : []
      if (!drillDownData.value.length) {
        ElMessage.info('没有钻取数据')
      }
    } else {
      ElMessage.error(result.message)
      drillDownData.value = []
    }
  } catch (error) {
    ElMessage.error(error.message || '获取钻取数据失败')
    drillDownData.value = []
  } finally {
    loading.value = false
  }
}

// 查询按钮点击
const handleQuery = () => {
  if (activeTab.value === 'monitoring') {
    fetchMonitoringData()
  } else if (activeTab.value === 'prediction') {
    fetchPredictionData()
  }
}

// 重置表单
const handleReset = () => {
  Object.assign(form, {
    customsArea: '',
    importExportType: '',
    startDate: '',
    endDate: '',
    statisticalType: 'month',
    dataSource: 'external',
    amountPercentage: 5.0,
    enableSecondaryFilter: false,
    currency: 'RMB',
    enableAlert: true,
    alertThreshold: 1.1,
    forecastPeriods: 6
  })
  fetchMonitoringData() // 重置后重新查询
}

// 页签切换
const handleTabChange = (tab) => {
  activeTab.value = tab
  if (tab === 'monitoring') {
    fetchMonitoringData()
  } else if (tab === 'prediction') {
    fetchPredictionData()
  }
}

// 监测类型切换
const handleMonitoringTabChange = () => {
  fetchMonitoringData()
}

// 钻取分析
const handleDrillDown = (row) => {
  const dimension = monitoringTab.value
  const value = row[getTableColumns(dimension)[0].prop]
  
  ElMessageBox.confirm(
    `是否对 ${value} 进行钻取分析？`,
    '钻取分析',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    fetchDrillDownData(dimension, value)
  })
}

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return '0'
  return new Intl.NumberFormat('zh-CN').format(amount)
}

// 格式化百分比
const formatPercentage = (value) => {
  if (!value) return '0%'
  return `${(value * 100).toFixed(2)}%`
}

// 获取趋势分析摘要
const getTrendSummary = () => {
  if (!predictionData.value.length) return '暂无数据'
  const totalChange = predictionData.value.reduce((sum, item) => sum + item.预测金额, 0)
  const avgChange = totalChange / predictionData.value.length
  const isOverallTrendUp = avgChange > 0
  const isOverallTrendDown = avgChange < 0

  if (isOverallTrendUp) {
    return '整体趋势上升'
  } else if (isOverallTrendDown) {
    return '整体趋势下降'
  } else {
    return '整体趋势平稳'
  }
}

// 获取预警数量
const getAlertCount = () => {
  if (!predictionData.value.length) return 0
  return predictionData.value.filter(item => item.置信度 > form.alertThreshold).length
}

// 获取置信度颜色
const getConfidenceColor = (confidence) => {
  if (confidence > 0.8) return '#67c23a' // 高置信度
  if (confidence > 0.5) return '#e6a23c' // 中置信度
  return '#f56c6c' // 低置信度
}

// 导出预测数据
const exportPredictionData = () => {
  const data = predictionData.value.map(item => ({
    '预测周期': item.预测周期,
    '预测金额': item.预测金额,
    '置信度': item.置信度,
    '趋势': item.趋势
  }))
  const worksheet = XLSX.utils.json_to_sheet(data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, '预测数据')
  XLSX.writeFile(workbook, '预测数据.xlsx')
}

// 调试信息折叠状态
const showDebugInfo = ref(false)
const toggleDebugInfo = () => {
  showDebugInfo.value = !showDebugInfo.value
}

// 初始化
onMounted(() => {
  fetchMonitoringData()
})
</script>

<template>
  <div class="anomaly-page">
    <!-- 查询表单 -->
    <el-card class="query-card">
      <el-form :inline="true" label-width="100px">
        <!-- 第一行：基础查询条件 -->
        <el-row :gutter="20" style="width: 100%; margin-bottom: 16px;">
          <el-col :span="6">
            <el-form-item label="关区">
              <el-select v-model="form.customsArea" filterable clearable placeholder="选择关区" style="width: 100%">
                <el-option v-for="opt in customsOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="进出口类型">
              <el-select v-model="form.importExportType" clearable placeholder="选择类型" style="width: 100%">
                <el-option v-for="opt in importExportOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="统计类型">
              <el-select v-model="form.statisticalType" style="width: 100%">
                <el-option v-for="opt in statisticalTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据来源">
              <el-select v-model="form.dataSource" style="width: 100%">
                <el-option v-for="opt in dataSourceOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 第二行：时间范围和币种 -->
        <el-row :gutter="20" style="width: 100%; margin-bottom: 16px;">
          <el-col :span="6">
            <el-form-item label="开始日期">
              <el-date-picker v-model="form.startDate" type="date" placeholder="选择开始日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束日期">
              <el-date-picker v-model="form.endDate" type="date" placeholder="选择结束日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币种">
              <el-select v-model="form.currency" style="width: 100%">
                <el-option v-for="opt in currencyOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预测周期" v-if="activeTab === 'prediction'">
              <el-input-number v-model="form.forecastPeriods" :min="1" :max="12" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 第三行：二次筛选和预警设置 -->
        <el-row :gutter="20" style="width: 100%; margin-bottom: 16px;">
          <el-col :span="6">
            <el-form-item label="二次筛选">
              <el-switch v-model="form.enableSecondaryFilter" />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.enableSecondaryFilter">
            <el-form-item label="金额占比">
              <el-input-number v-model="form.amountPercentage" :min="0.1" :max="100" :precision="1" style="width: 100%">
                <template #suffix>%</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用预警">
              <el-switch v-model="form.enableAlert" />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.enableAlert">
            <el-form-item label="预警阈值">
              <el-input-number v-model="form.alertThreshold" :min="1.0" :max="3.0" :precision="1" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 操作按钮 -->
        <el-row style="width: 100%; text-align: center;">
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <!-- 主要内容区域 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 异动监测页签 -->
        <el-tab-pane label="异动监测" name="monitoring">
          <el-tabs v-model="monitoringTab" @tab-change="handleMonitoringTabChange" type="card">
            <el-tab-pane 
              v-for="(config, key) in monitoringTypes" 
              :key="key"
              :label="config.label" 
              :name="key"
            />
          </el-tabs>

          <!-- 监测数据表格 -->
          <el-table 
            :data="monitoringData" 
            border 
            v-loading="loading" 
            height="500"
            @row-click="handleDrillDown"
            style="margin-top: 16px"
          >
            <el-table-column 
              v-for="col in getTableColumns(monitoringTab)" 
              :key="col.prop"
              :prop="col.prop" 
              :label="col.label" 
              :width="col.width"
              :min-width="col.minWidth"
            >
              <template #default="scope" v-if="col.slot">
                <el-tag :type="scope.row.isAlert ? 'danger' : 'success'">
                  {{ scope.row.isAlert ? '异常' : '正常' }}
                </el-tag>
              </template>
              <template #default="scope" v-else-if="col.prop.includes('Amount')">
                {{ formatAmount(scope.row[col.prop]) }}
              </template>
              <template #default="scope" v-else-if="col.prop.includes('Change')">
                <span :class="{ 'text-danger': scope.row[col.prop] > 0, 'text-success': scope.row[col.prop] < 0 }">
                  {{ formatPercentage(scope.row[col.prop]) }}
                </span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 16px; text-align: right"
          />
        </el-tab-pane>

        <!-- 数据预测页签 -->
        <el-tab-pane label="数据预测" name="prediction">
          <div class="prediction-content">
            <h3>ARIMA 时间序列预测</h3>
            <p>基于历史数据对未来趋势进行预测分析</p>
            
            <!-- 预测概览卡片 -->
            <div class="prediction-overview">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-card class="overview-card" shadow="hover">
                    <div class="overview-item">
                      <div class="overview-icon">
                        <el-icon><DataLine /></el-icon>
                      </div>
                      <div class="overview-content">
                        <div class="overview-value">{{ predictionData.length }}</div>
                        <div class="overview-label">预测周期</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="overview-card" shadow="hover">
                    <div class="overview-item">
                      <div class="overview-icon">
                        <el-icon><TrendCharts /></el-icon>
                      </div>
                      <div class="overview-content">
                        <div class="overview-value">{{ getTrendSummary() }}</div>
                        <div class="overview-label">趋势分析</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="overview-card" shadow="hover">
                    <div class="overview-item">
                      <div class="overview-icon">
                        <el-icon><Warning /></el-icon>
                      </div>
                      <div class="overview-content">
                        <div class="overview-value">{{ getAlertCount() }}</div>
                        <div class="overview-label">预警数量</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="overview-card" shadow="hover">
                    <div class="overview-item">
                      <div class="overview-icon">
                        <el-icon><Clock /></el-icon>
                      </div>
                      <div class="overview-content">
                        <div class="overview-value">{{ form.forecastPeriods }}</div>
                        <div class="overview-label">预测期数</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            
            <!-- 预测结果展示 -->
            <el-card class="prediction-table-card" shadow="hover">
              <template #header>
                <div class="card-header">
                  <span>预测结果详情</span>
                  <el-button type="primary" size="small" @click="exportPredictionData">
                    <el-icon><Download /></el-icon>
                    导出数据
                  </el-button>
                </div>
              </template>
              
              <el-table 
                :data="predictionData" 
                border 
                v-loading="loading"
                stripe
                highlight-current-row
                class="prediction-table"
              >
                <el-table-column prop="预测周期" label="预测周期" width="120" align="center">
                  <template #default="scope">
                    <el-tag type="info" size="small">{{ scope.row.预测周期 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="预测金额" label="预测金额" min-width="150" align="center">
                  <template #default="scope">
                    <div class="amount-cell">
                      <span class="amount-value">{{ formatAmount(scope.row.预测金额) }}</span>
                      <span class="amount-trend" v-if="scope.row.预测金额 > 1000000">
                        <el-icon color="#67c23a"><ArrowUp /></el-icon>
                      </span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="置信度" label="置信度" width="120" align="center">
                  <template #default="scope">
                    <el-progress 
                      :percentage="(scope.row.置信度 * 100).toFixed(1)" 
                      :color="getConfidenceColor(scope.row.置信度)"
                      :stroke-width="8"
                      :show-text="false"
                    />
                    <span class="confidence-text">{{ (scope.row.置信度 * 100).toFixed(1) }}%</span>
                  </template>
                </el-table-column>
                <el-table-column prop="趋势" label="趋势" width="100" align="center">
                  <template #default="scope">
                    <el-tag 
                      :type="scope.row.趋势 === '上升' ? 'success' : scope.row.趋势 === '下降' ? 'danger' : 'info'"
                      size="small"
                      effect="dark"
                    >
                      {{ scope.row.趋势 }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            
            <!-- 调试信息（可折叠） -->
            <el-card class="debug-card" shadow="never">
              <template #header>
                <div class="debug-header" @click="toggleDebugInfo">
                  <el-icon :class="{ 'is-reverse': showDebugInfo }"><ArrowDown /></el-icon>
                  <span>调试信息</span>
                  <el-tag type="warning" size="small">开发者模式</el-tag>
                </div>
              </template>
              
              <div v-show="showDebugInfo" class="debug-content">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="预测数据长度">{{ predictionData.length }}</el-descriptions-item>
                  <el-descriptions-item label="数据更新时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
                  <el-descriptions-item label="预测数据内容" :span="2">
                    <el-input
                      type="textarea"
                      :rows="4"
                      :value="JSON.stringify(predictionData, null, 2)"
                      readonly
                      class="debug-json"
                    />
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </div>
        </el-tab-pane>

        <!-- 钻取分析页签 -->
        <el-tab-pane label="钻取分析" name="drillDown">
          <div class="drill-down-content">
            <h3>数据钻取分析</h3>
            <p>点击监测数据表格中的行进行钻取分析</p>
            
            <!-- 钻取结果展示 -->
            <el-table 
              :data="drillDownData" 
              border 
              v-loading="loading"
              style="margin-top: 16px"
            >
              <el-table-column prop="dimension" label="维度" width="120" />
              <el-table-column prop="value" label="值" min-width="150" />
              <el-table-column prop="amount" label="金额" min-width="150">
                <template #default="scope">
                  {{ formatAmount(scope.row.amount) }}
                </template>
              </el-table-column>
              <el-table-column prop="yoyChange" label="同比变化" width="120">
                <template #default="scope">
                  <span :class="{ 'text-danger': scope.row.yoyChange > 0, 'text-success': scope.row.yoyChange < 0 }">
                    {{ formatPercentage(scope.row.yoyChange) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="momChange" label="环比变化" width="120">
                <template #default="scope">
                  <span :class="{ 'text-danger': scope.row.momChange > 0, 'text-success': scope.row.momChange < 0 }">
                    {{ formatPercentage(scope.row.momChange) }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<style scoped>
.anomaly-page {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.query-card {
  margin-bottom: 16px;
}

.main-card {
  min-height: 600px;
}

.prediction-content,
.drill-down-content {
  padding: 16px 0;
}

.text-danger {
  color: #f56c6c;
}

.text-success {
  color: #67c23a;
}

:deep(.el-table) {
  cursor: pointer;
}

:deep(.el-table tbody tr:hover) {
  background-color: #f5f7fa;
}

:deep(.el-tabs__content) {
  padding: 16px 0;
}

.prediction-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.overview-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overview-icon {
  font-size: 24px;
  color: #409eff; /* Element Plus primary color */
}

.overview-content {
  display: flex;
  flex-direction: column;
}

.overview-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.overview-label {
  font-size: 12px;
  color: #909399;
}

.prediction-table-card {
  margin-top: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-cell {
  display: flex;
  align-items: baseline;
}

.amount-value {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.amount-trend {
  margin-left: 5px;
  font-size: 14px;
  color: #67c23a; /* Success color */
}

.confidence-text {
  margin-left: 5px;
  font-size: 12px;
  color: #909399;
}

.debug-card {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.debug-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.debug-header .el-icon {
  transition: transform 0.3s ease;
  margin-right: 5px;
}

.debug-header .is-reverse {
  transform: rotate(180deg);
}

.debug-header span {
  margin-left: 5px;
  font-size: 14px;
  color: #303133;
}

.debug-header .el-tag {
  margin-left: 10px;
}

.debug-content {
  padding: 15px;
  background-color: #f9fafc;
  border-top: 1px solid #ebeef5;
}

.debug-json {
  font-size: 12px;
  color: #606266;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 5px;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>